<template>
  <div class="dual-select-container">
    <!-- 左侧选择器 -->
    <el-select v-model="leftVal" placeholder="请选择" @change="handleChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="width: 100%"
      />
    </el-select>

    <!-- 中间分隔线 -->
    <div class="divider-line"></div>

    <!-- 右侧选择器 -->
    <el-select v-model="rightVal" placeholder="请选择" @change="handleChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, watch } from 'vue';

  interface Option {
    value: string | number;
    label: string;
  }

  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    options: {
      // 统一选项配置
      type: Array as () => Option[],
      required: true,
    },
  });

  watch(props.options, (val) => {
    console.log(val);
  });

  const emit = defineEmits(['update:modelValue']);

  // 初始化拆解值
  const initialValues = props.modelValue.split('@');
  const leftVal = ref(initialValues[0] || '');
  const rightVal = ref(initialValues[1] || '');

  // 组合值计算
  const combinedValue = computed(() => {
    return `${leftVal.value}@${rightVal.value}`;
  });

  // 统一处理变更
  const handleChange = () => {
    emit('update:modelValue', combinedValue.value);
  };

  // 暴露方法
  defineExpose({
    reset: () => {
      leftVal.value = '';
      rightVal.value = '';
    },
  });
</script>

<style scoped lang="scss">
  .dual-select-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 800px;
    background: #fff;
    border-radius: 4px;
    padding-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .left-select,
    .right-select {
      flex: 1;
      width: 100%;

      /* 统一选择器高度 */
      :deep(.el-input__wrapper) {
        height: 40px;
      }
    }

    .divider-line {
      position: relative;
      flex: 0 0 1px;
      height: 24px;
      background: #dcdfe6;

      /* 添加渐变效果 */
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          rgba(220, 223, 230, 0) 0%,
          rgba(220, 223, 230, 1) 50%,
          rgba(220, 223, 230, 0) 100%
        );
        transform: translateY(-50%);
      }
    }

    @media (max-width: 640px) {
      flex-wrap: wrap;

      .divider-line {
        width: 100%;
        height: 1px;
        margin: 12px 0;

        &::after {
          height: 1px;
          background: #dcdfe6;
        }
      }
    }
  }
</style>
